<template>
    <div class="tips"><span>注意：</span>设置销售属性相关选项有0时，筛选的客户至少包含一个商机订单。</div>
    <el-form :model="formData" label-width="100px">
        <el-form-item label="商机流程">
            <el-checkbox-group v-model="formData.specify_process" @change="changStatus">
                <el-checkbox :label="-1" @change="changeCheckbox($event, index)">不限</el-checkbox>
                <el-checkbox
                    v-for="(item, index) in flowListOptList"
                    :key="index"
                    v-model="item.ischeck"
                    :label="item.id"
                    @change="changeCheckbox($event, index)">
                    {{ item.name }}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <div v-for="(item, index) in stageList2" :key="index">
            <el-form-item :label="item.name">
                <el-checkbox-group v-model="item.list" @change="changProcess">
                    <el-checkbox :label="-1" @change="changeCheckbox2($event, index, idx)">不限</el-checkbox>
                    <el-checkbox
                        v-for="(ite, idx) in item.stages"
                        :key="idx"
                        v-model="item.ischeck"
                        :label="ite.id"
                        @change="changeCheckbox2($event, index, idx)">
                        {{ ite.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </div>
        <el-form-item label="输单数量">
            <el-input
                v-model.number="numFun.lost_min"
                class="item-input input-left"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                placeholder="最小值"
                @input="handleNum(1)">
            </el-input>
            ~
            <el-input
                v-model.number="numFun.lost_max"
                class="item-input"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                placeholder="最大值"
                @input="handleNum(1)">
            </el-input>
            个
        </el-form-item>
        <el-form-item label="赢单数量">
            <el-input
                v-model.number="numFun.win_min"
                class="item-input input-left"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                placeholder="最小值"
                @input="handleNum(2)">
            </el-input>
            ~
            <el-input
                v-model.number="numFun.win_max"
                class="item-input"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                placeholder="最大值"
                @input="handleNum(2)">
            </el-input>
            个
        </el-form-item>
        <el-form-item label="商机金额">
            <el-input-number
                v-model="numFun.business_min"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input input-left"
                placeholder="金额下限"
                @blur="handlePrice(1)">
            </el-input-number>
            ~
            <el-input-number
                v-model="numFun.business_max"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input"
                placeholder="金额上限"
                @blur="handlePrice(1)">
            </el-input-number>
            元
        </el-form-item>
        <el-form-item label="赢单金额">
            <el-input-number
                v-model="numFun.account_min"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input input-left"
                placeholder="金额下限"
                @blur="handlePrice(2)">
            </el-input-number>
            ~
            <el-input-number
                v-model="numFun.account_max"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input"
                placeholder="金额上限"
                @blur="handlePrice(2)">
            </el-input-number>
            元
        </el-form-item>
        <el-form-item label="赢单订单金额">
            <el-input-number
                v-model="numFun.order_min"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input input-left"
                placeholder="金额下限"
                @blur="handlePrice(3)">
            </el-input-number>
            ~
            <el-input-number
                v-model="numFun.order_max"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input"
                placeholder="金额上限"
                @blur="handlePrice(3)">
            </el-input-number>
            元
        </el-form-item>
        <el-form-item class="form-item" label="赢单日期">
            <el-button :class="fllowTime == 3 ? 'time-color' : ''" @click="changeTime(3)">近3天</el-button>
            <el-button :class="fllowTime == 7 ? 'time-color' : ''" @click="changeTime(7)">近7天</el-button>
            <el-button :class="fllowTime == 15 ? 'time-color' : ''" @click="changeTime(15)">近15天</el-button>
            <el-button :class="fllowTime == 30 ? 'time-color' : ''" @click="changeTime(30)">近30天</el-button>
            <el-button :class="fllowTime == -2 ? 'time-color' : ''" @click="changeTime(-2)">近N天</el-button>
            <el-input-number
                v-if="fllowTime == -2"
                v-model.number="order_day"
                class="right-input"
                :controls="false"
                :precision="0"
                :min="1"
                :max="1000"
                @blur="changeOrderDay"></el-input-number>
            <el-button :class="fllowTime == 0 ? 'time-color' : ''" @click="changeTime(0)">自定义</el-button>
            <el-date-picker
                v-if="showAddTime"
                v-model="formData.win_order_time"
                type="datetimerange"
                class="right-picker"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 380px; margin-left: 10px; vertical-align: middle"></el-date-picker>
            <el-button :class="fllowTime == -1 ? 'time-color' : ''" class="right-item" @click="changeTime(-1)">
                不限制
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, reactive, watch, computed } from 'vue';
import { getDiffDay } from '@/utils/utils';
import { getDay } from '@/utils/timeCycle';
import { getWorkflowList } from '@/api/salesleads/salesmanagement/business';
import lodash from 'lodash';
const order_day = ref(60);
const formData = reactive({
    business_process: 1, //商机流程 1是全部 2是指定
    specify_process: [-1], //指定流程ID
    process_stage: {}, //指定流程阶段ID
    business_param: {
        lost_num_between: [], //输单数量范围
        win_num_between: [], //赢单数量范围
        business_amount: [], //商机金额范围
        win_amount: [], //赢单金额
        win_order_amount: [] //赢单订单金额
    },
    win_order_day: 0, //赢单近n天  0为自定义和不限制 自定义需传win_order_time不限制传[]
    win_order_time: [] //赢单日期
});
const numFun = reactive({
    lost_min: '',
    lost_max: '',
    win_min: '',
    win_max: '',
    business_min: undefined,
    business_max: undefined,
    account_min: undefined,
    account_max: undefined,
    order_min: undefined,
    order_max: undefined
});
const flowListOptList = ref([]);

const stageList2 = computed(() => {
    if (flowListOptList.value.length) {
        return flowListOptList.value.filter(item => item.ischeck);
    } else {
        return [];
    }
});
const isChat = ref(false);
const showAddTime = ref(false);
const fllowTime = ref(-1);
const stageList = reactive([]);
const props = defineProps(['business']);
// 获取商机流程
const flowListFun = () => {
    getWorkflowList({ name: '', state: '', page: 1, page_size: 99999 }).then((r: any) => {
        flowListOptList.value = r.data.map(item => {
            item.ischeck = false;
            return item;
        });
    });
};
flowListFun();

const changeCheckbox = (val, index) => {
    if (typeof index == 'number') {
        flowListOptList.value[index].ischeck = val;
    } else {
        flowListOptList.value = flowListOptList.value.map(item => {
            item.ischeck = false;
            return item;
        });
    }
};

const changeCheckbox2 = (val, index, idx) => {
    if (flowListOptList.value[index].list.length == 0) {
        flowListOptList.value[index].list = [-1];
    } else {
        const les = flowListOptList.value[index].list[flowListOptList.value[index].list.length - 1];
        if (les == -1) {
            flowListOptList.value[index].list = [-1];
        } else {
            flowListOptList.value[index].list = flowListOptList.value[index].list.filter((item: any) => {
                return item != -1;
            });
        }
        if (typeof idx == 'number') {
            flowListOptList.value[index].stages[idx].ischeck = val;
            const newArr = formatArr(stageList2.value);
            formData.process_stage = newArr;
        } else {
            const newArr = formatArr(stageList2.value);
            formData.process_stage = newArr;
            return;
        }
    }
};

const formatArr = arr => {
    return arr.reduce((pre, item) => {
        pre[item.id] = item.list;
        return pre;
    }, {});
};

//切换赢单日期
const changeTime = (type: any, val: any) => {
    fllowTime.value = type;
    showAddTime.value = false;
    if (type != 0) {
        formData.win_order_time = [];
    }
    switch (type) {
        case 3:
            return (formData.win_order_day = 3);
        case 7:
            return (formData.win_order_day = 7);
        case 15:
            return (formData.win_order_day = 15);
        case 30:
            return (formData.win_order_day = 30);
        case 0:
            formData.win_order_day = 0;
            return (showAddTime.value = true);
        case -1:
            return (formData.win_order_day = 0);
        case -2:
            return (formData.win_order_day = order_day.value);
    }
};
//校验数字
const handleNum = (val: number) => {
    switch (val) {
        case 1:
            formData.business_param.lost_num_between = [numFun.lost_min, numFun.lost_max];
            if (numFun.lost_min === '' && numFun.lost_max === '') {
                formData.business_param.lost_num_between = [];
            }
            break;
        case 2:
            formData.business_param.win_num_between = [numFun.win_min, numFun.win_max];
            if (numFun.win_min === '' && numFun.win_max === '') {
                formData.business_param.win_num_between = [];
            }
            break;
    }
};
//校验金额
const handlePrice = (val: number) => {
    switch (val) {
        case 1:
            formData.business_param.business_amount = [filFormat(numFun.business_min), filFormat(numFun.business_max)];
            if (
                formData.business_param.business_amount[0] === '' &&
                formData.business_param.business_amount[1] === ''
            ) {
                formData.business_param.business_amount = [];
            }
            break;
        case 2:
            formData.business_param.win_amount = [filFormat(numFun.account_min), filFormat(numFun.account_max)];
            if (formData.business_param.win_amount[0] === '' && formData.business_param.win_amount[1] === '') {
                formData.business_param.win_amount = [];
            }
            break;
        case 3:
            formData.business_param.win_order_amount = [filFormat(numFun.order_min), filFormat(numFun.order_max)];
            if (
                formData.business_param.win_order_amount[0] === '' &&
                formData.business_param.win_order_amount[1] === ''
            ) {
                formData.business_param.win_order_amount = [];
            }
            break;
    }
};
//
const changStatus = (val: any) => {
    if (val.length == 0) {
        formData.specify_process = [-1];
        formData.business_process = 1;
        formData.process_stage = {};
    } else {
        const index = val[val.length - 1];
        if (index == -1) {
            formData.specify_process = [-1];
            formData.business_process = 1;
        } else {
            formData.specify_process = val.filter((item: any) => {
                return item != -1;
            });
            formData.business_process = 2;
            flowListOptList.value.forEach(item => {
                if (formData.specify_process.includes(item.id)) {
                    !item.list && (item.list = [-1]);
                } else {
                    item.list = [-1];
                }
            });
        }
        if (formData.specify_process.length > 0 && formData.specify_process != [-1]) {
            const keys = Object.keys(formData.process_stage);
            if (keys.length > 0) {
                keys.filter((item: any) => {
                    if (!formData.specify_process.includes(Number(item))) {
                        delete formData.process_stage[item];
                    }
                });
            }
        }
    }
};
const filFormat = (val: any) => {
    if (val == null) {
        return '';
    } else {
        return val;
    }
};
// 赢单日期切换近N天
const changeOrderDay = () => {
    formData.win_order_day = order_day.value || 60;
    order_day.value = order_day.value || 60;
};
//切换流程
const changProcess = (val: any) => {};
const updateData = (val: any) => {
    numFun.lost_min = filFormat(val.business_param.lost_num_between[0]);
    numFun.lost_max = filFormat(val.business_param.lost_num_between[1]);
    numFun.win_min = filFormat(val.business_param.win_num_between[0]);
    numFun.win_max = filFormat(val.business_param.win_num_between[1]);
    numFun.business_min = filFormat(val.business_param.business_amount[0]);
    numFun.business_max = filFormat(val.business_param.business_amount[1]);
    numFun.account_min = filFormat(val.business_param.win_amount[0]);
    numFun.account_max = filFormat(val.business_param.win_amount[1]);
    numFun.order_min = filFormat(val.business_param.win_order_amount[0]);
    numFun.order_max = filFormat(val.business_param.win_order_amount[1]);
    (formData.business_param.lost_num_between = val.business_param.lost_num_between), //输单数量范围
        (formData.business_param.win_num_between = val.business_param.win_num_between), //赢单数量范围
        (formData.business_param.business_amount = val.business_param.business_amount), //商机金额范围
        (formData.business_param.win_amount = val.business_param.win_amount), //赢单金额
        (formData.business_param.win_order_amount = val.business_param.win_order_amount); //赢单订单金额
    formData.win_order_time = val.win_order_time;
    formData.win_order_day = val.win_order_day;
    if (val.win_order_time && val.win_order_time.length > 0) {
        fllowTime.value = 0;
        showAddTime.value = true;
    } else {
        if (val.win_order_day == 0) {
            fllowTime.value = -1;
        } else {
            if ([3, 7, 15, 30].includes(val.win_order_day)) {
                fllowTime.value = val.win_order_day;
            } else {
                fllowTime.value = -2;
                order_day.value = val.win_order_day;
            }
        }
    }
    formData.specify_process = val.specify_process;
    if (val.specify_process.length == 0) {
        formData.specify_process = [-1];
    }
    flowListOptList.value.forEach((item: any) => {
        item.ischeck = val.specify_process.includes(item.id);
        if (item.ischeck) {
            item.list = val.process_stage[item.id] || [-1];
            const newArr = formatArr(stageList2.value);
            formData.process_stage = newArr;
        } else {
            item.list = [-1];
        }
    });
};
watch(
    () => props.business,
    val => {
        if (val && val.id) {
            updateData(val);
        }
    }
);
defineExpose({
    formData,
    fllowTime
});
</script>
<style scoped lang="scss">
.tips {
    line-height: 1.5;
    font-size: 12px;
    color: #999;
    background-color: #fffaf9;
    padding: 8px;

    span {
        color: #ff6b00;
    }
}

.form-item {
    margin: 10px 0;

    .right-item {
        margin-left: 10px;
    }

    .time-color {
        background-color: #ff6b00;
        color: #fff;
    }
}

.item-input {
    width: 90px;
    margin: 5px;
}

.input-left {
    margin-left: 0;
}

.right-input {
    width: 90px;
    margin: 0 12px;
}

:deep input::-webkit-outer-spin-button,
:deep input::-webkit-inner-spin-button {
    appearance: none;
}

:deep input[type='number'] {
    appearance: textfield;
}
</style>
